<template>
	<gracePage :customHeader="false">
		<view slot="gBody" class="grace-body">
			<form @submit="formSubmit" class="grace-form grace-margin-top">
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label"><text class="grace-icons icon-user"></text></text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" name="username" placeholder="请输入用户名"></input>
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label"><text class="grace-icons icon-phone"></text></text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" name="mobile" placeholder="请输入手机号码"></input>
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label"><text class="grace-icons icon-speaker"></text></text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" name="code" placeholder="请输入验证码"></input>
					</view>
					<text class="grace-icons grace-form-icon grace-text-center grace-red" @tap="sendCode">获取验证码</text>
				</view>
				<view class="grace-form-item grace-border-b" @tap="open2">
					<text class="grace-form-label"><text class="grace-icons icon-link"></text></text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" :value="value2" disabled placeholder="请选择" />
					</view>
					<text class="grace-icons icon-arrow-down grace-form-icon grace-text-center"></text>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">登录密码</text>
					<view class="grace-form-body">
						<input type="password" v-if="pwdType == 'password'" class="grace-form-input" name="password" v-model="password"
						 placeholder="请输入登录密码"></input>
						<input type="text" v-if="pwdType == 'text'" class="grace-form-input" name="password" v-model="password"
						 placeholder="请输入登录密码"></input>
					</view>
					<text class="grace-icons icon-eye grace-form-icon grace-text-center" :class="[pwdType == 'text' ? 'grace-blue' : '']"
					 v-if="password != ''" @tap="showPwd"></text>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">确认密码</text>
					<view class="grace-form-body">
						<input type="password" v-if="pwd2Type == 'password'" class="grace-form-input" name="password2" v-model="password2"
						 placeholder="请再次确认登录密码"></input>
						<input type="text" v-if="pwd2Type == 'text'" class="grace-form-input" name="password2" v-model="password2"
						 placeholder="请再次确认登录密码"></input>
					</view>
					<text class="grace-icons icon-eye grace-form-icon grace-text-center" :class="[pwd2Type == 'text' ? 'grace-blue' : '']"
					 v-if="password2 != ''" @tap="showPwd2"></text>
				</view>
			</form>
			<view style="padding:22rpx 0;">
				<button class="grace-button" style="line-height:80rpx;" formType="submit" type="primary">提交</button>
			</view>
			<graceAddressPicker :show="show2" @confirm="confirm2" @close="close2" :value="default2"></graceAddressPicker>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceAddressPicker from '../../graceUI/components/graceAddressPicker.vue';
	var graceChecker = require("../../graceUI/jsTools/graceChecker.js");
	export default {
		data() {
			return {
				username: '',
				password: '',
				pwdType: 'password',
				password2: '',
				pwd2Type: 'password',
				show2: false,
				value2: '',
				// 第2个级联的默认值
				// ["26", "0", "5"] 代表 "陕西省", "西安市", "雁塔区"
				default2: [26, 0, 5]
			}
		},
		methods: {
			clearInput: function() {
				this.username = '';
			},
			showPwd: function() {
				this.pwdType = this.pwdType == "password" ? 'text' : 'password';
			},
			showPwd2: function() {
				this.pwd2Type = this.pwd2Type == "password" ? 'text' : 'password';
			},
			pickerChange: function(e) {
				this.genderIndex = e.detail.value;
			},
			// 表单提交及验证
			formSubmit: function(e) {
				//定义表单规则
				var rule = [{
						name: "nickname",
						checkType: "string",
						checkRule: "1,3",
						errorMsg: "姓名应为1-3个字符"
					},
					{
						name: "pwd",
						checkType: "string",
						checkRule: "6,",
						errorMsg: "密码至少6个字符"
					},
					{
						name: "pwd2",
						checkType: "samewith",
						checkRule: "pwd",
						errorMsg: "两次密码输入不一致"
					},
					{
						name: "gender",
						checkType: "in",
						checkRule: "1,2",
						errorMsg: "请选择性别"
					},
					{
						name: "aihao",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请选择爱好"
					},
					{
						name: "desc",
						checkType: "string",
						checkRule: "5,",
						errorMsg: "自我介绍至少5个字符"
					}
				];
				//进行表单检查 e.detail.value 内存放着表单数据
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.showToast({
						title: "验证通过!",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			open2: function() {
				this.show2 = true;
			},
			confirm2: function(e) {
				// 返回选中城市的编号及文本信息
				console.log(e);
				this.value2 = e.names[0] + ',' + e.names[1] + ',' + e.names[2];
				this.close2();
			},
			close2: function() {
				this.show2 = false;
			}
		},
		components: {
			gracePage,
			graceAddressPicker
		}
	}
</script>
<style>
	.grace-border-b {
		border-color: #F8F8F8;
	}
</style>
